<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store,no-cache"> 
    <meta name="Handheldfriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->
    <link rel="stylesheet" href="css/layui.mobile.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
   	<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
   	<script src="js/common.js"></script>
	<title>介绍自己</title>
</head>
<body>
	<div class="topbu">
		<p>选填</p>
	</div>
	<div class="miaoshu">
		<textarea cols="50" rows="5" id="textarea" onKeyDown="textdown(event)"
			onKeyUp="textup()" onfocus="if(value=='请在这里介绍一下自己吧'){value=''}"
		  onblur="if (value ==''){value='请在这里描述自己'}">请在这里介绍一下自己吧</textarea>
	</div>
	<div class="zhongjian">
		<p>选填</p>
	</div>
	<div class="danxuan">
      <div class="danxuanbox">
        <input type="checkbox" name="" id="" value="吸烟"><label style="vertical-align:top">吸烟</label>
        <input type="checkbox" name="" id="dd" value="有无子女"><label for="dd" >有无子女</label>
        <input type="checkbox" name="" id="" value="饮酒"><label style="vertical-align:top">饮酒</label>
      </div>  
      <div class="danxuanbox" style="border:none;">
          <input type="checkbox" name="" id="dd" value="是否购房"><label for="dd" >是否购房</label>
          <input type="checkbox" name="" id="" value="信仰"><label style="vertical-align:top">信仰</label>  
          <input type="checkbox" name="" id="dd" value="是否购车"><label for="dd" >是否购车</label>
      </div>
  </div>
	<form action="">
      <table class="biaoge">
        <tr>
          <td>体重</td>
          <td>
            <input name="textfield" type="text"  maxlength="5" value="输入体重"
              onfocus="if (value =='输入体重'){value =''}"
                onblur="if (value ==''){value='输入体重'}" />
          </td>
        </tr>
        <tr>
          <td>血型</td>
          <td>
            <select name=""> 
              <option value="1">A型</option> 
              <option value="2">B型</option>
              <option value="3">AB型</option> 
              <option value="4" selected = "selected">O型</option>  
            </select> 
          </td>
        </tr>
        <tr>
          <td>收入</td>
          <td>
             <select name=""> 
              <option value="1"  selected = "selected">3万-5万</option> 
              <option value="2">5万-10万</option>
              <option value="3">10万-20万</option> 
              <option value="4">30万以上</option>  
            </select> 
          </td>
        </tr>
        <tr>
          <td>学历</td>
          <td>
             <select name=""> 
              <option value="1"  selected = "selected">高中以下</option> 
              <option value="2">大专学历</option>
              <option value="3">本科学历</option> 
              <option value="4">研究生</option>  
            </select> 
          </td>
        </tr>
        <tr>
          <td>婚姻状况</td>
          <td>
             <select name=""> 
              <option value="1" selected = "selected" >未婚</option> 
              <option value="2">已婚</option> 
            </select> 
          </td>
        </tr>
        <tr style="border:none;">
          <td>家中排行</td>
          <td>
             <select name=""> 
              <option value="0" selected = "selected">独生子女</option> 
              <option value="1">家徒四壁</option>
            </select> 
          </td>
        </tr>
      </table> 
  </form>
  <div class="pei">
     <p>希望中的他(她)</p>
  </div>
  <div class="miaoshu">
    <textarea cols="50" rows="5" id="textarea" onKeyDown="textdown(event)"
          onKeyUp="textup()" onfocus="if(value=='请在这里写下心目中的她(他)'){value=''}"
          onblur="if (value ==''){value='请在这里写下心目中的她(他)'}">请在这里写下心目中的她(他)</textarea>
  </div>
	<div class="tijiaob">
    <a href="Edit-information.html"><input type="button" name="" id="" value="上一步" style="background-color: #d1d1d1;border: 1px solid #d1d1d1;"></a>
		<a href="mine.html"><input type="button" name="" id="" value="提 交"> </a>
	</div>
	<script type="text/javascript">
 
  function sure (key) {
  //这些代码是javascript的代码，需要包含在script标签中
   
/*  if(confirm("确认删除？"))
 {
       alert('已删除');
 }
else
{
       alert('取消')
}*/
  var bt1 = document.getElementById('bt1');
  var bt2 = document.getElementById('bt2');
  var bt3 = document.getElementById('bt3');
  var bt4 = document.getElementById('bt4');
  var bt5 = document.getElementById('bt5');
  bt1.style.backgroundColor="";
  bt2.style.backgroundColor="";
  bt3.style.backgroundColor="";
  bt4.style.backgroundColor="";
  bt5.style.backgroundColor="";
  if(key==1){
  bt1.style.backgroundColor="red";
  }else if(key==2){
  bt2.style.backgroundColor="red";
  }else if(key==3){
  bt3.style.backgroundColor="red";
  }else if(key==4){
  bt4.style.backgroundColor="red";
  }else if(key==5){
  bt5.style.backgroundColor="red";
  }
  }
</script>
<script>
 // 单张上传照片  删除照片
 $(" .fileinput").change(function () {
      var file = this.files[0];
      readFile(file,$(this).parent().siblings(".on"));
 });
 $(".on").mouseover(function () {
      $(this).children(".xian").show();
      $(this).children(".chahao").show();
 
 });
 $(".on").mouseleave(function () {
      $(this).children(".xian").hide();
      $(this).children(".chahao").hide();
 });
 $(".chahao").click(function () {
      $(this).next().remove();
      $(".xian").hide();
      $(".chahao").hide();
      $(this).parent().hide();
      $(this).parent().siblings(".addhao").show();
      $(this).parent().siblings(".addhao").children().val("");
 
 });
 var on =document.querySelector(".on");
 //    需要把阅读的文件传进来file element是把读取到的内容放入的容器
 function readFile(file,element) {
 //        新建阅读器
 var reader = new FileReader();
 //        根据文件类型选择阅读方式
 switch (file.type){
 case 'image/jpg':
 case 'image/png':
 case 'image/jpeg':
 case 'image/gif':
 reader.readAsDataURL(file);
 break;
 }
 //        当文件阅读结束后执行的方法
 reader.addEventListener('load',function () {
 //         如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
 switch (file.type){
     case 'image/jpg':
     case 'image/png':
     case 'image/jpeg':
     case 'image/gif':
     var img = document.createElement('img');
     img.src = reader.result;
     element.append(img);
     element.siblings(".addhao").hide();
     element.show();
     break;
    }
   });
 }
 // 批量上传部分
 var piliang = document.querySelector('#piliang');
 var on = $(".on");
 piliang.addEventListener('change',function () {
 for (var i = 0;i < this.files.length;i++){
 var file = this.files[i];
 on.eq(i).children(".chahao").next().remove();
 readFile(file,on.eq(i));
 }
 });
 //
 var on = $(".on");
 $(".next").click(function () {
    for (var i = 0; i < 10; i++) {
    console.log(on[i].childNodes.length);
    if (on[i].childNodes.length==6){
 //这个判断就是说明里面有多少个孩子，孩子不够数，不会生成相册
       }else{
           alert("上传照片不足3张");
           $(".next").attr("href","javascript:void(0)");
            return
            }
      $(".next").attr("href","生成相册.html");
    }
 });
 </script>

</body>
</html>